<template>
	<div>
		<div>
			<van-empty v-if="voucherList.length<=0" class="custom-image" :image="emptyImg" description="此订单没有货品凭证" />
			<div v-if="voucherList.length>0">
				<div class="width82 backgroundWhite radius5 margin-top-10" v-for="(item,index) in voucherList"
					:key="index">
					<div style="text-align: center;font-weight: bold;" class="text-14 padding-bottom-10">{{item.des}}</div>
					<van-image v-if="item.type==1" fit="cover" class="voucherImg" :src="item.url" @click="imagePreview(item.url)"></van-image>
					<video v-if="item.type==2" controls style="width: 82vw;height: 50vw;" :src="item.url"></video>
					<div class="text-12 gray margin-top-10">
						
						<div>上传人员:{{item.uploader}}</div>
						<div>上传时间:{{item.uploadDate}}</div>
					</div>
				</div>
			</div>
		</div>



		<div style="height: 65px;"></div>
		<div class="borderBtn" v-if="orderState!=4&&orderState!=5">
			<van-button style="width: 90vw;" @click="clickVoucher" :color="colorBtn" type="primary" round>上传凭证
			</van-button>
		</div>

		<van-action-sheet v-model="showVoucher" title="上传凭证">
			<div class="width90 voucher">

				<van-field v-model="message" rows="3" autosize type="textarea" maxlength="200" placeholder="请输入凭证备注文字"
					show-word-limit />
				<div class="text-14" style="margin: 15px 0;">上传照片/视频</div><!-- 照片3张，视频3 -->
				
				<van-radio-group v-model="fileType" direction="horizontal">
				  <van-radio name="1" icon-size="14px">照片</van-radio>
				  <van-radio name="2" icon-size="14px">视频</van-radio>
				</van-radio-group>

				<div>
					<van-uploader v-if="fileType==2" :before-delete="deleteFile" :after-read="afterRead" v-model="fileList" :max-count="1"
						accept="video/*" />
					<van-uploader v-if="fileType==1" :before-delete="deleteFile" :after-read="afterRead" v-model="fileList" :max-count="1"
							accept="image/*" />
				</div>


				<div style="width: 90vw;margin: auto;margin-top: 20px;margin-bottom: 32px;">
					<van-button @click="onVoucher" style="width: 90vw;margin: auto;" :color="colorBtn" type="primary"
						round>确认</van-button>
				</div>
			</div>
		</van-action-sheet>
	</div>
</template>

<script>
	import BaseView from "@/views/BaseView.vue"
	import {
		Toast
	} from 'vant';
	import { ImagePreview } from 'vant';
	export default {
		extends: BaseView,
		data() {
			return {
				title: "货品凭证",
				showVoucher: false,
				message: "",
				fileList: [],
				fileType: "1", //1图片，2视频
				imgList: "", //图片/视频url
				fileId: "", //图片/视频id
				orderId: 0,
				orderState: 0, //订单状态（4已验货5已退回不能上传凭证）22，7
				param: {
					orderId: 0,
					fileType:"22,7"
				},
				voucherList: []
			}
		},
		created() {
			this.orderId = this.$route.query.orderId
			this.param.orderId = this.$route.query.orderId
			this.orderState = this.$route.query.orderState
			if(this.orderState==1){
				//待验货
				this.param.fileType="22,7,23,5"
			}else if(this.orderState==2){
				//待退回
				this.param.fileType="22,7,24"
			}else if(this.orderState==4){
				//已验货
				this.param.fileType="22,7,5"
			}
			this.getVoucherList()
		},
		methods: {
			//
			clickVoucher(){
				this.message=""
				this.fileList=[]
				this.imgList=""
				this.fileId=""
				this.showVoucher=true
			},
			//查询货物凭证
			getVoucherList() {
				this.$axios.get("/order/delivery/goodsFile", {
					params: this.param
				}).then(res => {
					console.log("货品凭证", res)
					this.voucherList = res.data
				})
			},
			afterRead(file) {
				console.log("选择图片", file)
				var fileType = file.file.type
				file.status = 'uploading'
				file.message = "上传中"
				var formData = new FormData()
				formData.append('file', file.file)
				if (fileType.indexOf('video') != -1) {
					//视频上传
					console.log("视频上传")

					this.$axios.post("file/base/videoUpLoad", formData).then(res => {
						console.log("视频上传", res)
						if (res.code == 1) {
							this.fileType = "2"
							file.status = 'done'
							this.imgList = res.data.url
							this.fileId = res.data.id
							// this.imgIdList.push(res.data.id)
						} else {
							file.status = 'failed'
							file.message = "上传失败"
						}
					}).catch(err => {
						// console.log("错误",err)
						file.status = 'failed'
						file.message = "上传失败"
					})

				} else if (fileType.indexOf('image') != -1) {
					//图片上传
					console.log("图片上传")

					this.$axios.post("file/base/imgUpLoad", formData).then(res => {
						console.log("文件上传", res)
						if (res.code == 1) {
							this.fileType = "1"
							file.status = 'done'
							this.imgList = res.data.url
							this.fileId = res.data.id
							// this.imgIdList.push(res.data.id)
						} else {
							file.status = 'failed'
							file.message = "上传失败"
						}
					}).catch(err => {
						// console.log("错误",err)
						file.status = 'failed'
						file.message = "上传失败"
					})
				}

			},
			//删除文件
			deleteFile() {
				this.imgList = ""
				this.fileList = []
			},
			//上传凭证
			onVoucher() {
				if (!this.message) {
					Toast('请输入图片/视频描述');
					return;
				}
				if (!this.fileId) {
					Toast('请上传图片/视频描述');
					return;
				}

				//判断图片/视频是否上限
				// var fileNum = 0
				// for (var i = 0; i < this.voucherList.length; i++) {
				// 	if (this.voucherList[i].fileType == this.fileType&&this.voucherList[i].recordType==this.orderState) {
				// 		fileNum++
				// 	}
				// }
				// if (fileNum >= 3) {
				// 	Toast('图片/视频最多上传3个');
				// 	return;
				// }

				var param = {
					orderId: Number(this.orderId),
					recordType: Number(this.orderState),
					filesType: this.fileType,
					fileId: this.fileId,
					describe: this.message

				}
				console.log("凭证上传", param)
				this.$axios.get("/order/delivery/affirmUploadFiles", {
					params: param
				}).then(res => {
					console.log("凭证上传返回", res)
					Toast(res.msg);
					this.showVoucher = false
					this.getVoucherList()
				})
			},
			//预览图片
			imagePreview(url){
				ImagePreview([url]);
			}
		}
	}
</script>

<style>
	.voucher .van-cell {
		padding: 0 !important;
	}

	.voucherImg {
		width: 82vw;
		height: 58.3vw;
	}
</style>
